<template>
  <div id="videolist" class="page-full-screen">
    <div>
      <el-button @click="addTit('新增')">新增</el-button>
      <!--<el-button @click="addTit('屏蔽')">屏蔽</el-button>-->
      <!--<el-button @click="addTit('解除屏蔽')">解除屏蔽</el-button>-->
      <el-button @click="searchshow = !searchshow">搜索&nbsp;<i class="iconfont icon-zhankai" :class="{active: searchshow === true}" style="font-size: 12px"></i></el-button>
    </div>
    <el-collapse-transition>
      <div v-show="searchshow">
        <div class="main-box">
          <span>标题</span>
          <el-input
            placeholder="请输入关键字"
            size="mini"
            prefix-icon="el-icon-search"
            v-model="searchmsg.title">
          </el-input>
        </div>
        <div class="main-box">
          <span>状态</span>
          <el-radio-group v-model="searchmsg.enabled">
            <el-radio label="">全部</el-radio>
            <el-radio label="1">可用</el-radio>
            <el-radio label="0">不可用</el-radio>
          </el-radio-group>
          <span style="margin-left: 20px"><el-button size="mini" @click="search">确定</el-button></span>
        </div>
      </div>
    </el-collapse-transition>
    <msg-list :tableData="tableData" :title="title" :btntype="btntype" :getimg="true" :pagesall="parseInt(pagesall)" :pages="parseInt(page)" @getselect="getselect" @changepage="changepage1" @getid="getid1"></msg-list>
    <div class="layer" v-show="showimg">
      <div class="mask" @click="showimg = false"></div>
      <div class="imgcontent">
        <img :src="getmsg.img" alt="">
      </div>
    </div>
    <div class="layer" v-show="seecontent">
      <div class="mask" @click="seecontent = false"></div>
      <div class="content">
        <span class="close" @click="seecontent = false"><i class="iconfont icon-untitled94"></i></span>
        <p class="title">{{addtitle}}主题</p>
        <div class="inputcl">
          <span class="layer-list-title">标题:</span>
          <span><el-input v-model="addvideo.title" placeholder="请输入标题" size="mini"></el-input></span>
        </div>
        <div class="clear"></div>
        <div class="inputcl">
          <span class="layer-list-title">分类名:</span>
          <span>
            <el-select v-model="addvideo.category_id" size="mini" placeholder="请选择">
              <el-option
                      v-for="item in videocateadd"
                      :key="item.id"
                      :label="item.alias"
                      :value="item.id">
              </el-option>
            </el-select>
          </span>
        </div>
        <div class="clear"></div>
        <div class="inputcl">
          <span class="layer-list-title">介绍:</span>
          <span><el-input v-model="addvideo.intro" placeholder="请输入介绍" size="mini"></el-input></span>
        </div>
        <div class="clear"></div>
        <div class="inputcl">
          <span class="layer-list-title">作者名:</span>
          <span><el-input v-model="addvideo.author" placeholder="请输入作者名" size="mini"></el-input></span>
        </div>
        <div class="clear"></div>
        <div class="inputcl">
          <span class="layer-list-title">开课时间:</span>
          <span><el-input v-model="addvideo.open_time" placeholder="请输入开课时间" size="mini"></el-input></span>
        </div>
        <div class="clear"></div>
        <div class="inputcl">
          <span class="layer-list-title">当前期数:</span>
          <span class="imgupload">
            <el-input v-model="addvideo.current" size="mini"></el-input>
          </span>
        </div>
        <div class="clear"></div>
        <div class="inputcl">
          <span class="layer-list-title">总期数:</span>
          <span class="imgupload">
            <el-input v-model="addvideo.total" size="mini"></el-input>
          </span>
        </div>
        <div class="clear"></div>
        <div class="inputcl">
          <span class="layer-list-title img-list">预览图:</span>
          <span class="imgupload">
            <img-upload :getimg='setimg' @getmsg="getimgmsg"></img-upload>
          </span>
        </div>
        <div class="clear"></div>
        <div class="inputcl">
          <span class="layer-list-title">状态:</span>
          <span>
            <el-radio-group v-model="enabled">
              <el-radio :label="0">可用</el-radio>
              <el-radio :label="1">不可用</el-radio>
            </el-radio-group>
          </span>
        </div>
        <div class="clear"></div>
        <div class="inputcl">
          <span class="layer-list-title">是否开课:</span>
          <span>
            <el-radio-group v-model="open">
              <el-radio :label="1">开课</el-radio>
              <el-radio :label="0">不开课</el-radio>
            </el-radio-group>
          </span>
        </div>
        <div class="clear"></div>
        <div class="inputcl">
          <span class="layer-list-title">排序:</span>
          <span class="imgupload">
            <el-input v-model="addvideo.order_num" size="mini"></el-input>
          </span>
        </div>
        <div class="main-box" style="text-align: center">
          <span style="margin-left: 50px;"><el-button @click="addTags">确定</el-button></span>
          <span style="margin-left: 50px;"><el-button @click="seecontent = false">取消</el-button></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import msgbox from '../../common/msgbox.js'
import config from '../../common/config'
import MsgList from '../public/msgList'
import editor from '../../assets/editor/content'
import ImgUpload from '../public/imgUpload'

export default {
  components: {
    ImgUpload,
    MsgList,
    editor: editor},
  name: 'questions',
  data () {
    return {
      page: 1,
      addtitle: '新增',
      setimg: '',
      enabled: 0,
      open: 1,
      vtypes: '',
      addvideo: {
        category_id: '',
        title: '',
        intro: '',
        img: '',
        current: '',
        total: '',
        author: '',
        open: 1,
        enabled: 0,
        order_num: 0,
        open_time: ''
      },
      searchmsg: {
        title: '',
        enabled: ''
      },
      btntype: ['修改', '删除'],
      pagesall: 0,
      content: {},
      type: true,
      deletes: {
        ids: [],
        reason: ''
      },
      delshow: false,
      searchshow: false,
      seecontent: false,
      title: [
        {
          prop: 'id',
          label: 'id'
        },
        {
          prop: 'title',
          label: '视频标题'
        },
        {
          prop: 'intro',
          label: '主题介绍'
        },
        {
          prop: 'current',
          label: '当前期数'
        },
        {
          prop: 'total',
          label: '总数'
        },
        {
          prop: 'author',
          label: '作者名'
        },
        {
          prop: 'enabled',
          label: '是否可用'
        }
      ],
      tableData: [],
      intro: [],
      tid: 0,
      getmsg: {},
      showimg: false,
      videocateadd: []
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    search () { // 搜索获取数据
      let that = this
      this.$g.ajax({
        path: 'videoTopics/getList',
        method: 'post',
        data: {
          title: this.searchmsg.title,
          enabled: this.searchmsg.enabled,
          page: this.page
        },
        cbSuccess: function (data) {
          that.tableData = data.memo.list
          that.pagesall = parseInt(data.memo.pageTotal)
          that.types()
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    types () { // 获取分类数据
      let that = this
      this.$g.ajax({
        path: 'videoTopics/getCategories',
        method: 'get',
        cbSuccess: function (data) {
          that.videocateadd = data.memo.children
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    addTit (type) {
      let that = this
      if (type === '新增') {
        this.seecontent = true
        this.addtitle = type
        this.addvideo = {
          category_id: '',
          title: '',
          intro: '',
          img: '',
          current: '',
          total: '',
          author: '',
          open: 1,
          enabled: 0,
          open_time: '',
          order_num: 0
        }
        this.open = 1
        this.enabled = 0
        this.vtypes = 'free'
        this.setimg = ''
      } else if (type === '屏蔽' || type === '解除屏蔽') {
        let enabled = ''
        if (type === '屏蔽') {
          enabled = 0
        }
        if (type === '解除屏蔽') {
          enabled = 1
        }
        this.$g.ajax({
          path: 'Videotopics/setStatus/' + enabled,
          method: 'post',
          data: {
            ids: this.deletes.ids
          },
          cbSuccess: function (data) {
            that.search()
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      }
    },
    addTags () { // 添加/修改视频集
      let that = this
      if (this.addvideo.title === '') {
        this.$message.error('标题不能为空')
      } else if (this.addvideo.author === '') {
        this.$message.error('作者不能为空')
      } else if (this.addvideo.category_id === '') {
        this.$message.error('分类不能为空')
      } else if (this.addvideo.current === '') {
        this.$message.error('当前期数不能为空')
      } else if (this.addvideo.total === '') {
        this.$message.error('总期数不能为空')
      } else if (parseInt(this.addvideo.total) > 217) {
        this.$message.error('总期数不能超过217期')
      } else if (this.addvideo.img === '') {
        this.$message.error('封面不能为空')
      } else if (this.addvideo.intro === '') {
        this.$message.error('简介不能为空')
      } else {
        this.addvideo.open = this.open
        if (parseInt(this.enabled) === 0) {
          this.addvideo.enabled = 1
        }
        if (parseInt(this.enabled) === 1) {
          this.addvideo.enabled = 0
        }
        if (this.addtitle === '新增') {
          this.$g.ajax({
            path: 'videoTopics/add',
            method: 'post',
            data: that.addvideo,
            cbSuccess: function (data) {
              that.seecontent = false
              that.addvideo = {
                category_id: '',
                title: '',
                intro: '',
                img: '',
                current: '',
                total: '',
                author: '',
                open: 1,
                enabled: 0,
                open_time: '',
                order_num: 0
              }
              that.setimg = ''
              that.search()
            },
            cbError: function (data) {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
        if (this.addtitle === '修改') {
          this.$g.ajax({
            path: 'videoTopics/update',
            method: 'post',
            data: {
              id: that.tid,
              title: that.addvideo.title,
              category_id: that.addvideo.category_id,
              intro: that.addvideo.intro,
              img: that.addvideo.img,
              current: that.addvideo.current,
              total: that.addvideo.total,
              author: that.addvideo.author,
              open: that.addvideo.open,
              enabled: that.addvideo.enabled,
              open_time: that.addvideo.open_time,
              order_num: that.addvideo.order_num
            },
            cbSuccess: function (data) {
              that.addvideo = {
                category_id: '',
                title: '',
                intro: '',
                img: '',
                current: '',
                total: '',
                author: '',
                open: 1,
                enabled: 0,
                open_time: '',
                order_num: 0
              }
              that.open = 1
              that.seecontent = false
              that.search()
            },
            cbError: function (data) {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
      }
    },
    changepage1 (page) { // 更改page
      this.page = page
      this.search()
    },
    delhot () { // 删除视频集
      let that = this
      this.$confirm('确定删除主题吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$g.ajax({
          path: 'videoTopics/delete',
          method: 'post',
          data: {
            ids: [that.tid]
          },
          cbSuccess: function (data) {
            that.search()
          },
          cbError: function (data) {
            if (data.msg === 'video_found') {
              that.$message.error('该视频集下有视频，不能删除')
            } else {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getid1 (val) { // 获取列表button信息
      let that = this
      if (val.btn === '删除') {
        this.tid = val.val.id
        this.delhot()
      }
      if (val.btn === '修改') {
        that.$g.ajax({
          path: 'videoTopics/getInfo',
          method: 'post',
          data: {
            id: val.val.id
          },
          cbSuccess: function (data) {
            that.getmsg = data.memo
            that.tid = data.memo.id
            that.setimg = config.imgURI + that.getmsg.img
            that.seecontent = true
            that.addtitle = '修改'
            that.changemsg(val)
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      }
      if (val.btn === '预览') {
        this.getmsg = val.val
        this.showimg = true
      }
    },
    getselect (vals) { // 获取多选id
      this.deletes.ids = []
      for (let i in vals) {
        this.deletes.ids.push(vals[i].id)
      }
    },
    changemsg () {
      this.addvideo = this.getmsg
      if (this.getmsg.enabled === 0) {
        this.enabled = 1
      }
      if (this.getmsg.enabled === 1) {
        this.enabled = 0
      }
      this.open = this.getmsg.open
    },
    getimgmsg (date) { // 获取图片信息
      this.addvideo.img = date.fullName
      this.setimg = config.imgURI + date.fullName
    }
  }
}
</script>

<style lang="scss" scoped>
  .active{
    display: inline-block;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
  }
  #videolist {
    .main-box{
      margin-top: 20px;
      span{
        margin-right: 30px;
        font-size: 14px;
        font-weight: 700;
        color: #606266;
      }
      .el-input {
        width: 240px;
      }
    }
    .main-box {
      .el-radio__inner {
        background: red;
      }
      .el-radio__input.is-checked+.el-radio__label{
        color: #00a4a0!important;
      }
    }
    .layer {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 999;
      overflow: hidden;
      .mask {
        background: rgba(153, 153, 153, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
      }
      .imgcontent {
        text-align: center;
        img {
          position: relative;
          max-width: 80%;
          max-height: 80%;
          background: #fff;
          margin: 5% auto;
          z-index: 3;
        }
      }
      .content {
        position: relative;
        width: 60%;
        max-height: 80%;
        background: #fff;
        margin: 5% auto;
        z-index: 2;
        padding: 30px;
        overflow: scroll;
        .close {
          position: absolute;
          right: 10px;
          top: 10px;
          cursor: pointer;
        }
        .inputcl {
          margin-top: 20px;
          .layer-list-title {
            display: inline-block;
            width: 80px;
            margin-left: 15px;
            margin-right: 10px;
            float: left;
            vertical-align: middle;
            line-height: 28px;
          }
          .img-list {
            vertical-align: top;
            float: left;
            line-height: 18px;
          }
          .imgupload {
            display: block;
            margin-left: 105px;
          }
          .el-input {
            max-width: 200px;
          }
          img {
            width: 320px;
            height: 240px;
          }
        }
        .title {
          text-align: center;
          font-size: 18px;
          font-weight: bold;
        }
        .doit .one .el-input {
          width: 200px;
          margin-left: 20px;
        }
        .doit .one {
          margin-top: 20px;
          font-size: 14px;
        }
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
          position: relative;
          left: -4px;
        }
        .buttons {
          margin-top: 20px;
          text-align: center;
          button {
            margin: 0 20px;
          }
        }
      }
    }
  }
</style>
<style>
  .el-button:focus, .el-button:hover{
    color: #00a4a0;
  }
  .el-button:active{
    border-color: #00a0a0;
  }
  .el-button{
    padding: 8px 14px;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background: #00a4a0;
    border-color: #00a4a0;
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
  #videolist .el-textarea__inner {
    resize: none;
  }
</style>
